<template>
  <div>
    <v-card title="加载图表动效" class="mb-50">
      <vcu-chart-line :loading="loading" :data="chartData" />
    </v-card>

    <v-card title="自定义加载图表动效">
      <v-alert message="为了保持图表组件传入参数尽量简洁，loading 的背景色以及 spinner 暂时使用覆盖 class 方式来实现" type="info" showIcon class="mb-10"></v-alert>
      <vcu-chart-line class="custom-loading" :loading="loading" :data="chartData" />
    </v-card>
  </div>
</template>

<script>
export default {
  name: 'loading',
  data() {
    return {
      loading: true,
      chartData: {},
    }
  },
  methods: {},
}
</script>

<style lang="less" scoped>
.custom-loading {
  /deep/.vcu-charts-loading-mask {
    background-color: rgba(0, 0, 0, 0.8);
    
    .path {
      stroke: #f35352;
    }
  }
}
</style>